<template>
  <div class="container-card">
    <header class="header" v-if="title">
      <span class="top-line"></span>
      <h2>{{title}}</h2>
      <span class="bottom-line"></span>
      <div class="bottom-decorate">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="bottom-left-line"></div>
    </header>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'container-card',
  props: {
    title: String
  }
}
</script>

<style lang="scss" scoped>
.container-card {
  @include flex(column, flex-start, flex-start);
  margin-top: 20px;
  .header {
    @include wh(100%, 40px);
    padding: 0 20px;
    line-height: 40px;
    background-image: linear-gradient(90deg, rgba(31, 180, 255, 0.12) 0%, rgba(31, 180, 255, 0) 100%);
    box-sizing: border-box;
    position: relative;
    border-top: 1px solid #136480;
    h2 {
      font-size: 16px;
      color: #fff;
      font-weight: normal;
    }
    .top-line {
      @include wh(30px, 1px);
      position: absolute;
      top: -1px;
      left: 0;
      background: #1FC6FF;
    }
    .bottom-line {
      @include wh(100%, 1px);
      position: absolute;
      bottom: 0;
      left: 0;
      background-image: linear-gradient(90deg, rgba(31, 199, 255, 0) 0%, #1FC7FF 50%, rgba(31, 199, 255, 0) 100%);
    }
    .bottom-decorate {
      @include wh(100%, 1px);
      @include flex(row);
      position: absolute;
      bottom: 0;
      left: 0;
      span {
        @include wh(10px, 1px);
        background: #1FC7FF;
        margin-right: 5px;
        animation: flash .5s linear infinite;
        &:nth-child(1) {
          animation-duration: .2s;
        }
        &:nth-child(1) {
          animation-duration: .4s;
        }
      }
    }
    .bottom-left-line {
      @include wh(20px, 4px);
      background: #1FC7FF;
      margin-right: 5px;
      position: absolute;
      bottom: 0;
      right: -6px;
      transform:skewX(20deg);
    }
  }
  .content {
    @include wh(100%, auto);
    flex: 1;
    border: 1px solid #136480;
    // border-top: 0;
    padding: 20px;
    box-sizing: border-box;
  }
}
@keyframes flash {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
